import notFoundData from '@/echarts/notFoundData';
import * as echarts from 'echarts';
import React, { useEffect, useRef, useState } from 'react';

/**@description 横向渐变柱状图 */
const HorizontalGradientBar = ({

    borderColor = null,
    colors = [],
    filedsName = {
        name: "name",
        value: "value"
    },
    style = {
        width: 400,
        height: 200,
    },
    title = "echart图形模块柱形图",

}) => {
    const [list, setList] = useState([]);
    const echartDOM = useRef();
    var myChart = null;
    var option;

    option = {
        grid: {
            left: '5%',
            right: '0%',
            bottom: "5%",
            top: "10%",
            containLabel: true
        },
        backgroundColor: 'rgba(0,0,0,0)', //设置无背景色
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        xAxis: {
            splitLine: {
                show: false,
            },
            type: 'category',
            data: list.map(item => item[filedsName.name])
        },
        yAxis: {
            type: 'value',
            splitLine: { //去除网格横线
                show: false,
            },
        },
        series: [
            {
                name: title,
                data: list.map(item => item[filedsName.value]),
                type: 'bar',
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 0, 1, // 渐变方向：从上到下
                        colors && colors.length > 0 ? colors : [
                            { offset: 0, color: '#36c9bf' },
                            { offset: 1, color: '#36c9bf00' },
                        ]
                    ),
                    borderRadius: [0, 0, 0, 0],//配置圆角
                    borderColor: borderColor ? borderColor : null
                },
                barWidth: 10, //宽度
            },

        ]
    };


    useEffect(() => {
        myChart = echarts.init(echartDOM.current);

        myChart.clear();

        if (echartDOM.current && list.length > 0) {

            myChart.setOption(option)
        } else {

            myChart.setOption(notFoundData, true);
        }


    }, [echartDOM, list])
    const onLine = () => {
        const ws = new WebSocket("ws://localhost:6234?token=1234567890");
        ws.onopen = () => {
            console.log('Connected to server');
            ws.send('webSocket连接成功!');
        };

        ws.onmessage = (event) => {
            const jsonString = event.data;
            const data = JSON.parse(jsonString);
            console.log(data); // 输出对象或数组
            setList(data.list || []);
            // console.log("接收到新消息：", event.data);
        };

        ws.onclose = () => {
            console.log('连接关闭');
        };

        ws.onerror = (error) => {
            console.error('WebSocket错误:', error);
        };
    }

    useEffect(() => {
        onLine();
    }, [])

    return (
        <div style={style} ref={echartDOM}></div>
    )

}
export default HorizontalGradientBar;